<template>
    <div class="py-[15px] px-[40px]">
        <div class="text-white">
            <CustomTitle title="设备概览"></CustomTitle>

            <div class="gap-x-[30px] flex items-center mt-[10px]">
                <div :key="index" v-for="(item, index) of datas"
                    class="rounded-[10px] py-[15px] px-[20px] flex flex-col justify-between items-center bg-[#1D1D1D] w-full h-[740px] overflow-x-hidden overflow-y-auto">
                    <div
                        class="self-start flex justify-center items-center title bg-[#FF9F00] h-[44px] w-[90px] rounded-[10px]">
                        <span class="text-[16px]">{{ item.cabinet_name }}</span>
                    </div>
                    <div class="w-[300px] h-[300px]" v-if="item.device">
                        <video v-if="item.device[0].filter((i: any) => i.type === 'GC').length === 1"
                            src="@/assets/video/one_jigui.mp4" class="w-[300px] object-cover" loop autoplay />
                        <video v-else src="@/assets/video/jigui.mp4" class="w-[300px] object-cover" loop autoplay />
                    </div>
                    <!-- <div class="w-[240px] h-[300px]">
            <img src="@/assets/images/jigui.png" class="w-[240px] object-cover scale-90" />
          </div> -->
                    <div class="w-[785px] h-[340px] text-red-300">
                        <a-carousel arrows>
                            <div class="div w-full" :key="i" v-for="(data, i) of item.device">
                                <!-- <div class="grid grid-cols-3 h-[340px] overflow-hidden"> -->
                                <div class="flex justify-center gap-x-[16px] h-[340px] overflow-hidden">
                                    <div class="text-white flex items-center" :key="j1" v-for="(d, j1) of data">
                                        <div class="flex flex-col items-center">
                                            <div class="text-[14px] mb-[10px] cursor-pointer" @click="clickItem(d)">{{
                                                d.name }}</div>

                                            <div
                                                class="h-[250px] w-[239px] relative overflow-y-auto min-w-[220px] px-[20px] py-[20px] rounded-[10px] bg-[#2F2F2F]">
                                                <img src="@/assets/images/sunshine.png"
                                                    class="max-w-[170px] h-[4px] absolute top-0 left-[50%] translate-x-[-50%]" />
                                                <div v-for="(a, j) of d.meters" :key="j"
                                                    class="flex text-[12px] items-end mb-[10px]">
                                                    <div class="w-[120px]">{{ a.name }}</div>
                                                    <div class="ml-[5px]">{{ isNaN(Number(a.value)) ? a.value :
                                                        Number(a.value).toFixed(2) }}</div>
                                                    <div class="ml-[8px]">{{ a.unit }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a-carousel>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { apiGetDeviceByGroup } from '@/http/api';
// import { onBeforeMount } from 'vue';
const route = useRoute();
const router = useRouter();
let parent_name = '';
let second_name = '';
const datas = ref<any[]>([]);
const originDatas = ref<any[]>([]);
const getDatas = async () => {
    try {
        const res = await apiGetDeviceByGroup(parent_name, second_name);
        originDatas.value = res.data.reverse();
        console.log('originDatas.value', originDatas.value);
        handleDatas();
    } catch (error) { }
};

const clickItem = (item: any) => {
    router.push({
        name: 'devices_info',
        query: {
            name: item.name,
            parent_name: item.group_parent_name,
            group_second_name: item.group_second_name,
            // group_second_name: record.type,
        },
    });
};

const handleDatas = () => {
    datas.value = JSON.parse(JSON.stringify(originDatas.value));
    let device: any = [];
    if (datas.value && datas.value.length > 0) {
        datas.value.forEach((item: any) => {
            const originDevices = item.device;
            if (originDevices && originDevices.length > 0) {
                for (let i = 0; i <= parseInt(originDevices.length / 3 + ''); i++) {
                    let arr = [];
                    for (let index = 0; index < (originDevices.length > 3 ? originDevices.length : 3); index++) {
                        const element = originDevices[i * 3 + index];
                        if (!element) break;
                        arr.push(element);
                        if (arr.length === 3) break;
                    }
                    if (arr && arr.length > 0) {
                        device.push(arr);
                    }
                }
                if (device && device.length > 0) {
                    item.device = device;
                }
                // item.device  = [];
                // item.device.push(device)
                device = [];
            }
        });
    }
    // if (val && val.length > 0) {
    //   for (let i = 0; i <= parseInt(val.length / 8 + ''); i++) {
    //     let arr = [];
    //     for (let index = 0; index < (val.length > 8 ? val.length : 8); index++) {
    //       const element = val[i * 8 + index];
    //       if (!element) break;
    //       arr.push(element);
    //       if (arr.length === 8) break;
    //     }
    //     device.push(arr);
    //   }
    // }
};
onMounted(() => {
    parent_name = (route.meta.params as any)!.parent_name;
    second_name = (route.meta.params as any)!.second_name;
    getDatas();
});

watch(
    () => route.path,
    () => {
        try {
            datas.value = [];
            parent_name = (route.meta.params as any)!.parent_name;
            second_name = (route.meta.params as any)!.second_name;
            getDatas();
        } catch (error) {

        }
    }
);
</script>
<style></style>
<style lang="less" scoped>
.title {
    // box-shadow: 0 0 4px 0px #ff9f00;
}
</style>
